<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="style/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="style/js/echarts.js" ></script>
		<style>
			#main{
	width: 100%;
	height: 400px;
	line-height: 400px;
	margin: 0 auto;
	align-content: center;
	margin-top: 30px;
}
		</style>
		<script>
			$(function(){
				
			var $_GET = (function(){
		    var url = window.document.location.href.toString();
		    var u = url.split("?");
		    if(typeof(u[1]) == "string"){
		        u = u[1].split("&");
		        var get = {};
		        for(var i in u){
		            var j = u[i].split("=");
		            get[j[0]] = j[1];
		        }
		        return get;
		    } else {
		        return {};
		    }
		});
				console.log($_GET().urlName);
				//var url="http://192.168.11.130:10001/V1/app/url/state?netUrl="+$_GET().urlName+"&loadTimeLines=200&loadTimeLines=500&loadTimeLines=1000&loadTimeLines=3000&loadTimeLines=5000&loadTimeLines=10000";
				var url="http://112.74.51.64:20002/api/V1/app/url/state?netUrl="+$_GET().urlName+"&loadTimeLines=200&loadTimeLines=500&loadTimeLines=1000&loadTimeLines=3000&loadTimeLines=5000&loadTimeLines=10000";
				console.log(url);
				$.ajax({
					type:"get",
					url:url,
					dataType:'jsonp',
					processData:false,
					success:function(data){
						var urlloadtime=[];
						var numsdata=[];
			var list = eval(data.data.UrlStateCount);
			console.log(list);
			for(var i=0;i<list.length;i++){
				var str1=eval(list[i]);
				var netState=JSON.stringify(str1.netState);
				var nums=JSON.stringify(str1.nums);
				var yjdUrlstate=JSON.stringify(str1.yjdUrlstate);
				numsdata.push(nums);
				
			}
			console.log(numsdata);
			var Xname=["0-200毫秒","200-500毫秒","500-1000毫秒","1-3秒","3-5秒","5-10秒","10秒以上"];
			var myChart = echarts.init(document.getElementById('main'));
							var option={
					title: {
					show: true,
					text: '页面加载时长',
					subtext: '单位(次)',
				},
				toolbox: {
					show: true,
					orient: 'horizontal',
					showTitle: true,
					right: 50,
					feature: {
						dataView: {
							show: true,
						},
						saveAsImage: {
							show: true,
						},
						magicType: {
							type: ['line', 'bar', 'stack', 'tiled']
						},
						restore :{
							show: true
						}
					}

				},
				tooltip: {

				},
				legend: {
					data: '网络加载时长'
					//datat:['停留时长','访问时长'];
				},
				xAxis: {
					data: Xname
				},
				yAxis: {
					axisLabel: {
						min: 0,
						max: 80,
						interval: 10,
						formatter: '{value} 次'
					}
				},
						series: [{
						name: '网络加载时长',
						type: 'bar',
						barWidth: 50,
						data: numsdata,
						itemStyle: {
							normal: {
								color: '#B5C334'
							}
						},
					},
					{
						name: '网络加载时长',
						type: 'line',
						barWidth: 50,
						data: numsdata,
					}
				]
					};
		
					myChart.setOption(option);
					}
				});
				
				
				
				
							var startTime;
			var endTime;
			$("#confirm").click(function(){
				//alert(111);
				var platform=$("#platform option:selected").val();
				console.log(platform);
				startTime=$("#startTime").val();
				startTime=startTime.replace(new RegExp("-","gm"),"/").replace(new RegExp("T","gm")," ");
				var startTime1= (new Date(startTime)).getTime()/1000;
				console.log(startTime1);
				 endTime=$("#endTime").val();
				 endTime= endTime.replace(new RegExp("-","gm"),"/").replace(new RegExp("T","gm")," ");
				var endTime1= (new Date(endTime)).getTime()/1000;
				console.log(endTime1);
					if(isNaN(startTime1)){
					startTime1="";
				}
				if(isNaN(endTime1)){
					endTime1="";
				}
				
				//var url="http://192.168.11.130:10001/V1/app/url/state?platform="+platform+"&netUrl="+$_GET().urlName+"&reqStartTime="+startTime1+"&reqEndTime="+endTime1+"&loadTimeLines=200&loadTimeLines=500&loadTimeLines=1000&loadTimeLines=3000&loadTimeLines=5000&loadTimeLines=10000"
				var url="http://112.74.51.64:20002/api/V1/app/url/state?platform="+platform+"&netUrl="+$_GET().urlName+"&reqStartTime="+startTime1+"&reqEndTime="+endTime1+"&loadTimeLines=200&loadTimeLines=500&loadTimeLines=1000&loadTimeLines=3000&loadTimeLines=5000&loadTimeLines=10000"
				console.log(url);
				$.ajax({
					type:"get",
					url:url,
					dataType:'jsonp',
					processData:false,
					success:function(data){
						var str = eval(data.data.UrlStateCount);
						var netStatedata=[];
						var numsdata=[];
						var yjdUrlstatedata=[];
							for(var i=0;i<str.length;i++){
							var str1=eval(str[i]);
							var netState=JSON.stringify(str1.netState);
							var nums=JSON.stringify(str1.nums);
							var yjdUrlstate=JSON.stringify(str1.yjdUrlstate);
							if(netState!="null"){
							netStatedata.push(eval(netState));
							}else{
								netStatedata.push(0);
							}
							if(yjdUrlstate!="null"){
								yjdUrlstatedata.push(eval(yjdUrlstate));
							}else{
							yjdUrlstatedata.push(0);
							}
							numsdata.push(nums);
							console.log("net"+netStatedata);
							console.log("num"+numsdata);
							console.log("yjd"+yjdUrlstatedata);
							}
						var myChart = echarts.init(document.getElementById('main'));
						var Xname=["0-200毫秒","200-500毫秒","500-1000毫秒","1-3秒","3-5秒","5-10秒","10秒以上"];
									var option = {
		    title: {
		        text: '网络加载数据',
		        //subtext: '数据来自网络'
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    legend: {
		        data: ['nums(次)', 'yjdUrlstate(毫秒)','netState']
		    },
		    grid: {
		    	    top: '12%',
		        left: '3%',
		        right: '10%',
		        containLabel: true
		    },
		        xAxis: [
		            {
		                type : 'category',
		            data:Xname
		            }
		        ],
		        yAxis: [
		            {
		                type : 'value',
		              //  name : '网络加载',
		            }
		        ],
		    series: [
		        {
		            name: 'nums(次)',
		            type: 'bar',
		           // barWidth: 10,
		         data:numsdata
		        },
		        {
		            name: 'yjdUrlstate(毫秒)',
		            type: 'bar',
		            //  barWidth: 10,
		            data: yjdUrlstatedata
		        },
		         {
		            name: 'netState',
		            type: 'bar',
		            //  barWidth: 10,
		            data:netStatedata
		        }
		    ],

					toolbox: {
					show: true,
					orient: 'horizontal',
					showTitle: true,
					right: 50,
					feature: {
						dataView: {
							show: true,
						},
						saveAsImage: {
							show: true,
						},
						magicType: {
							type: ['line', 'bar', 'stack', 'tiled']
						},
						restore :{
							show: true
						}
					}

				}
			};
			myChart.setOption(option);
						}
					});
				});
			});

			
		</script>
	</head>
	<body>
				<div align="center">
			<select id="platform">
			<option value="">请选择平台</option>
			<option value="1">android</option>
			<option value="2">ios</option>
		</select>
		<span >日期选择:</span>
		<input type="datetime-local"  id="startTime" style="margin-top: 30px;"/>
		<input type="datetime-local" id="endTime" />
		
		<input type="button" value="确定" id="confirm"/>
		</div>
		<div id="main">
			
		</div>
		
	</body>
</html>
